import React from 'react';
import { Card, Typography, Space, Row, Col, Divider } from 'antd';
import { 
  InfoCircleOutlined, 
  SafetyCertificateOutlined, 
  CloudOutlined,
  LockOutlined,
  DownloadOutlined,
  TeamOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const About = () => {
  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <Card style={{ 
        backgroundColor: 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(10px)',
        borderRadius: '10px'
      }} bordered={false}>
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div style={{ textAlign: 'center' }}>
            <Title level={2} style={{ color: '#fff' }}>
              <InfoCircleOutlined /> 关于 UP包包
            </Title>
            <Paragraph style={{ color: 'rgba(255, 255, 255, 0.8)', fontSize: '16px' }}>
              一个安全可靠的资源解锁与分享平台
            </Paragraph>
          </div>

          <Divider style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }} />

          <Row gutter={[24, 24]}>
            <Col xs={24} md={12}>
              <Title level={4} style={{ color: '#1890ff' }}>
                <SafetyCertificateOutlined /> 我们的服务
              </Title>
              <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                UP包包是一个专注于资源安全分发的平台。我们提供加秘钥件存储和分享服务，
                用户可以通过输入特定秘钥来解锁和访问受保护的资源。
              </Paragraph>
              <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                我们致力于保护用户的数据安全和隐私，采用行业领先的加密技术确保文件在传输和存储过程中的安全性。
              </Paragraph>
            </Col>
            <Col xs={24} md={12}>
              <Title level={4} style={{ color: '#1890ff' }}>
                <TeamOutlined /> 我们的团队
              </Title>
              <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                我们是一支专业的技术团队，专注于网络安全、数据加密和用户体验设计。
                团队成员拥有丰富的互联网产品开发经验，致力于为用户提供安全、便捷的资源分享服务。
              </Paragraph>
            </Col>
          </Row>

          <Divider style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }} />

          <Row gutter={[24, 24]}>
            <Col xs={24} md={8}>
              <Card style={{ 
                backgroundColor: 'rgba(24, 144, 255, 0.1)',
                borderColor: 'rgba(24, 144, 255, 0.3)',
                textAlign: 'center'
              }} bordered={false}>
                <LockOutlined style={{ fontSize: '32px', color: '#1890ff' }} />
                <Title level={5} style={{ color: '#fff', marginTop: '10px' }}>安全加密</Title>
                <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  文件全程加密存储，确保数据安全
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card style={{ 
                backgroundColor: 'rgba(82, 196, 26, 0.1)',
                borderColor: 'rgba(82, 196, 26, 0.3)',
                textAlign: 'center'
              }} bordered={false}>
                <CloudOutlined style={{ fontSize: '32px', color: '#52c41a' }} />
                <Title level={5} style={{ color: '#fff', marginTop: '10px' }}>云端存储</Title>
                <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  基于云的存储方案，随时随地访问
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card style={{ 
                backgroundColor: 'rgba(114, 46, 209, 0.1)',
                borderColor: 'rgba(114, 46, 209, 0.3)',
                textAlign: 'center'
              }} bordered={false}>
                <DownloadOutlined style={{ fontSize: '32px', color: '#722ed1' }} />
                <Title level={5} style={{ color: '#fff', marginTop: '10px' }}>便捷下载</Title>
                <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  简单易用的界面，轻松获取所需资源
                </Paragraph>
              </Card>
            </Col>
          </Row>

          <Divider style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }} />

          <div style={{ textAlign: 'center' }}>
            <Title level={4} style={{ color: '#fff' }}>
              联系我们
            </Title>
            <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
              如有任何问题或建议，请通过以下方式联系我们：
            </Paragraph>
            <Paragraph style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
              邮箱：support@upbaobao.com
            </Paragraph>
          </div>
        </Space>
      </Card>
    </div>
  );
};

export default About;